import React, {useContext} from 'react';
import matericals from '../../component/material';
import sigima from './modules-configs';
import CreatorContext from './creator-context';
import './index.less';

export default (props: any) => {
  const {compConfigs, setCompConfigs} = useContext(CreatorContext);
  const {bricksConfigs} = compConfigs;
  console.log(bricksConfigs);
  return <div>
    {sigima.map((itemObj, index) => {
      const { displayName, demoProps, name } = itemObj;
      const Item = matericals[displayName];
      return (<div className="materical-show-view" key={index}>
        <span className="materical-name">{name}</span>
        <span className="materical-add" onClick={() => {
          bricksConfigs.push({...itemObj});
          setCompConfigs({...compConfigs});
        }}>加</span>
        {/* <span className="materical-drag" onClick={() => {
          bricksConfigs.push({...itemObj});
          setCompConfigs({...compConfigs});
        }}>拖</span> */}
        <Item {...demoProps} />
      </div>);
    })}
  </div>
}